{% extends 'base.html'%}
{% block content %}
<div class="ui equal width grid" style="margin:5px 0 5px 0;width:70%">
        <div class="row">
            <div class="column">
                <div class="ui container segment">
                         <div class="ui container" id="chart1"></div>

                </div>

            </div>

        </div>
    </div>
<div class="ui equal width grid" style="margin:5px 0 5px 0;width:70%">
        <div class="row">
            <div class="column">
                <div class="ui container segment">
                         <div class="ui container" id="chart2"></div>
                </div>

            </div>

        </div>
    </div>
{% endblock %}
{% block js %}
<script>
 $(function () {
      $('#chart1').highcharts({
        chart: {
            plotBackgroundColor: null,
            plotBorderWidth: null,
            plotShadow: false
        },
        title: {
            text: '各大城市房源网站所占比例'
        },
        tooltip: {
            headerFormat: '{series.name}<br>',
            pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    format: '<b>{point.name}</b>: {point.percentage:.1f} %',
                    style: {
                        color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
                    }
                },
                states: {
                    hover: {
                        enabled: false
                    }
                },
                slicedOffset: 20,         // 突出间距
                point: {                  // 每个扇区是数据点对象，所以事件应该写在 point 下面
                    events: {
                        // 鼠标滑过是，突出当前扇区
                        mouseOver: function() {
                            this.slice();
                        },
                        // 鼠标移出时，收回突出显示
                        mouseOut: function() {
                            this.slice();
                        },
                        // 默认是点击突出，这里屏蔽掉
                        click: function() {
                            return false;
                        }
                    }
                }
            }
        },
        series: [{
            type: 'pie',
            name: '房源信息占比',
            data: [
                {% for item in cities %}
                  {{item|safe}},
                {% endfor %}
            ]
        }]
    });
});
</script>
    {% endblock %}

